<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width">
    <title>商城页面</title>
    <link rel="stylesheet" href="./static/element-plus/index.css"/>
    <script src="./static/js/vue.global.js"></script>
    <script src="./static/element-plus/index.full.js"></script>
    <style>
        .el-carousel__item img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-row>
                    <el-col span="4" style="display: flex;flex-direction: row;align-items: center">
                        <img src="./images/logo.png" style="height: 60px ;width: 60px" />
                        <h2>技术社区</h2>
                    </el-col>

                    <el-col :span="8">
                        <el-menu default-active="activeIndex" mode="horizontal" style="border-bottom: none !important">
                            <a href="index.html"><el-menu-item index="1">首页</el-menu-item></a>
                            <el-menu-item index="2">文章</el-menu-item>
                            <el-menu-item index="3">课程</el-menu-item>
                            <el-menu-item index="4">商城</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="8" style="height: 60px;line-height: 60px;" class="hidden">
                        <el-input placeholder="请输入内容">
                    </el-col>
                </el-row>
            </el-header>
        
            <el-container>
                <main>
                    <el-row>
                        <el-col :xs="12" :sm="8" v-for="(product,i) in productList" :key="i">
                            <img :src="product.img" />
                            <p>{{product.name}}</p>
                            <p>价格：{{product.price}} 库存：{{product.stock}}</p>
                            <el-button @click="addToCart(product)">加入购物车</el-button>
                        </el-col>
                    </el-row>
                </main>
                <aside>
                    <el-card>
                        <h2>购物车</h2>
                        <div v-if="cartItems.length>0" >
                            <div v-for="(item,i) in cartItems" :key="i">
                                {{item.name}}
                                <el-input-number v-model="item.number" :min="0" :max="item.stock" @change="handleChange(item)"></el-input-number>
                                <!-- <p>单价:{{product.price}}</p> -->
                            </div>
                            <p>总金额: ￥{{ total }}</p>
                            <el-button>立即购买</el-button>
                            <el-divider style="margin:10px 0;"/>
                        </div>
                        <div v-else>
                            <el-empty description="暂无商品"></el-empty>
                        </div>
                    </el-card>
                </aside>
            </el-container>
        
            <el-footer>
                <el-row>
                    <el-col :xs="24" :lg="8">
                        <div>
                            <img src="./images/logo.png" style="height: 60px; width: 60px" />
                            <h2>技术社区</h2>
                            <p>致力于打造一个专业的IT技术交流社区</p>
                        </div>
                    </el-col>

                    <el-col :xs="24" :lg="8">
                        <div style="display: flex; flex-direction: column; align-items: flex-start;">
                            <div style="display: flex; gap: 10px;">
                                <a href="index.html"><el-link>首页</el-link></a>
                                <el-link>资讯</el-link>
                                <el-link>课程</el-link>
                                <el-link>商城</el-link>
                            </div>
                            <div style="display: flex; gap: 10px;">
                                <el-link>关于我们</el-link>
                                <el-link>使用手册</el-link>
                                <el-link>隐私条款</el-link>
                                <el-link>建议反馈</el-link>
                            </div>
                        </div>
                    </el-col>
                    
                    <el-col :xs="24" :lg="8">
                        <div>
                            <h2>联系我们</h2>
                            <p>电话：18072521971</p>
                            <p>邮箱：wudidewu@qq.com</p>
                        </div>
                    </el-col>
                </el-row>
            </el-footer>
        </el-container>
    </div>
</body>

<script>
    var App={
        data(){
            return{
                activeIndex:"1",
                productList: [
                    { id :"1", type: '徽章', name: 'IT社区文创 ：「代码新秀闪耀」 荣誉徽章', price: 29, stock: 30, img: './images/product01.png' },
                    { id :"2",type: '帆布包', name: '【it社区文创】「极简主义」帆布包', price: 79, stock: 60, img: './images/product02.png' },
                    { id :"3",type: 'T恤', name: '蓝字魔法，解锁IT新风尚——百搭T恤衫', price: 12, stock: 100, img: './images/product03.png' },
                    { id :"4",type: 'U盘', name: 'IT达人必备：128GB紫色技术社区U盘', price: 39, stock: 80, img: './images/product04.png' },
                    { id :"5",type: '笔记本', name: '高端皮质IT笔记本，简约设计尽显专业气质', price: 29, stock: 30, img: './images/product05.png' },
                    { id :"6",type: '鼠标垫', name: '文创字母鼠标垫「IT技术社区专属」', price: 79, stock: 60, img: './images/product06.png' },
                    { id :"7",type: '马克杯', name: '白色陶瓷杯，简约IT标志，时尚办公新选择', price: 12, stock: 100, img: './images/product07.png' },
                    { id :"8",type: '贴纸', name: '科技与创意碰撞——IT社区蓝色徽章文创', price: 39, stock: 80, img: './images/product08.png' },],
                cartItems:[],
                totalPrice :0,
            };
        },
        methods:{
            addToCart(product){
                const cartItem = this.cartItems.find((item)=>
                    item.id === product.id);
                if(cartItem){
                    cartItem.number++;
                }else{
                    this.cartItems.push({...product, number:1});
                }
            },
            handleChange(item){
                if(item.number <= 0){
                    this.removeFromCart(item);
                }
            },
            removeFromCart(item){
                const index = this.cartItems.indexOf(item);
                if(index>-1){
                    this.cartItems.splice(index, 1);
                }
            },
        },
        computed:{
            total(){
                let total = 0;
                this.cartItems.forEach((item)=>{
                    total += item.number*item.price;
                });
                return total;
            },
        },
    };
    Vue.createApp(App).use(ElementPlus).mount("#app");
</script>